import { Row, Col, Card, Button, Alert } from 'antd';
import { inject, observer } from 'mobx-react';
import DraftItem from './DraftItem';
import {toJS} from "mobx";

@inject('contractCreateStore')
@observer
class Draft extends React.Component {
    constructor(props) {
        super(props);

    }

    componentDidMount(){
        // const {contractCreateStore} = this.props;
		// contractCreateStore.initWF();
		this.scrollheigth();
    }

    render() {
        const { contractCreateStore } = this.props;
        const { showDatas = {}, isAbc, tabKey, changeGroup, groups,error,errorMsg } = contractCreateStore;
        const { abcBtns, typesShow, typesCols } = showDatas;
        // console.log(toJS(typesCols));
        const actions = {changeGroup};
        return (
            <div>
                {error?
                <Alert message="提示" description={errorMsg} type="warning"  showIcon/>:
                <div>
                {isAbc && (
                    <div className="abcbtn-group">
                    {
                        abcBtns.map(abcBtn => <Button className={abcBtn.selected ? 'btn-selected' : ''} type='ghost' key={abcBtn.letter}
                            disabled={abcBtn.disabled} onClick={this.goABC.bind(this,abcBtn.letter)}>{abcBtn.letter}</Button>)
                    }
                    </div>)
                }

                {
                    typesShow.length == 0?<Alert message="提示" description="数据为空" type="info" showIcon /> :(
                        <Row>
                        {
                            typesCols.map(c=>{
                                return <Col span={24 / typesCols.length} style={{padding:'0 10px'}}>
                                    <DraftItem types={c} isAbc={isAbc} actions={actions} groups={groups}/>
                                </Col>;
                            })
                        }
                        </Row>
                    )
                }
                </div>}
            </div>
        );
    };

    goABC(letter){
		const {contractCreateStore} = this.props;
		contractCreateStore.setAbcSelected(letter);
	  	let topheight = jQuery('#'+letter).position().top;
	  	jQuery(".wea-wf-add-content").scrollTop(topheight);
    }
    
    scrollheigth(){
    	let top = jQuery(".wea-wf-add-content").offset() ? (jQuery(".wea-wf-add-content").offset().top ? jQuery(".wea-wf-add-content").offset().top : 0) : 0;
        let scrollheigth = document.documentElement.clientHeight - top;
        jQuery(".wea-wf-add-content").height(scrollheigth-30);
    }
}

export default Draft;